<template>
  <div id="mavon_editor_container">
    <mavon-editor ref=md @imgAdd="upload" @change="change"
                  v-model="markdownContent"
                  :toolbars="toolbars"
                  toolbarsBackground="#f4f4f4"
                  codeStyle="obsidian"
                  :tabSize=4
                  :xssOptions="false"
                  boxShadowStyle=""
                  placeholder="开始编写内容..."></mavon-editor>
  </div>
</template>
<script>
import { uploadFile } from '@/api/tool/file'
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

export default {
  name: 'Markdown',
  components: {
    mavonEditor
  },
  props: {
    content: {
      type: String,
      default: ''
    }
  },
  data: function() {
    return {
      markdownContent: '',
      html: '',
      toolbars: {
        // 粗体
        bold: true,
        // 斜体
        italic: true,
        // 标题
        header: true,
        // 下划线
        underline: true,
        // 中划线
        strikethrough: true,
        // 标记
        mark: true,
        // 上角标
        superscript: true,
        // 下角标
        subscript: true,
        // 引用
        quote: true,
        // 有序列表
        ol: true,
        // 无序列表
        ul: true,
        // 链接
        link: true,
        // 图片链接
        imagelink: true,
        // code
        code: true,
        // 表格
        table: true,
        // 全屏编辑
        fullscreen: true,
        // 沉浸式阅读
        readmodel: true,
        // 展示html源码
        htmlcode: true,
        // 帮助
        help: true,
        /* 1.3.5 */
        // 上一步
        undo: true,
        // 下一步
        redo: true,
        // 清空
        trash: true,
        // 保存（触发events中的save事件）
        save: false,
        /* 1.4.2 */
        // 导航目录
        navigation: true,
        /* 2.1.8 */
        // 左对齐
        alignleft: true,
        // 居中
        aligncenter: true,
        // 右对齐
        alignright: true,
        /* 2.2.1 */
        // 单双栏模式
        subfield: false,
        // 预览
        preview: true
      }
    }
  },
  watch: {
    content(newValue) {
      this.markdownContent = newValue
    },
    markdownContent(newValue) {
      this.$emit('input', newValue)
    }
  },
  methods: {
    // 将图片上传到服务器，返回地址替换到md中
    upload(pos, $file) {
      const formData = new FormData()
      formData.append('file', $file)
      formData.append('path', 'editor')
      uploadFile(formData).then(response => {
        this.$refs.md.$img2Url(pos, this.$store.state.app.server_api + `${process.env.VUE_APP_MODULE_ADMIN_API}/public/file/download/${response.param}`)
      }).catch(() => {})
    },
    change(value, render) {
      // render 为 markdown 解析后的结果
      this.html = render
      this.$emit('render', render)
    }
  }
}
</script>
<style>
#mavon_editor_container {
  height: 500px;
}

#mavon_editor_container > .v-note-wrapper {
  height: 100%;
}

#mavon_editor_container .auto-textarea-block {
  display: contents!important;
}

#mavon_editor_container pre {
  height: auto!important;
  padding: 0!important;
}

#mavon_editor_container .hljs {
  padding: 10px!important;
}
</style>
